.wdu-button {
    box-sizing: border-box;
    padding: 0 15px;
    outline: none;
    letter-spacing: 2px;
    white-space: nowrap;
    .wdu-transition-quick();
    .wdu-radius-normal();
    .out-shadow-light();
    .wdu-border-solid();
    border-radius: 5px;

    &:hover {
        cursor: pointer;
    }

    &__small {
        .wdu-text-small();
        height: 26px;
    }

    &__normal {
        .wdu-text-normal();
        height: 36px;
    }

    &__large {
        .wdu-text-large();
        height: 46px;
    }

    &__plain {
        .wdu-bg-plain();
        color: @wdu-font-color-main;

        &:hover {
            background: linear-gradient(#f0f0f0, #e0e0e0);
        }
    }

    &__important {
        .wdu-bg-important();
        color: @wdu-color-front;

        &:hover {
            background-image: linear-gradient(#7f9bda, #506db1);
        }
    }

    &__danger {
        .wdu-bg-danger();
        color: @wdu-color-front;

        &:hover {
            background-image: linear-gradient(#e07d78, #d36661);
        }
    }

    &__success {
        .wdu-bg-success();
        color: @wdu-color-front;

        &:hover {
            background-image: linear-gradient(#bce776, #9dbe68);
        }
    }

    &__warn {
        .wdu-bg-warn();
        color: @wdu-color-front;

        &:hover {
            background-image: linear-gradient(#fff16e, #d1bf20);
        }
    }

    &__disabled {
        .wdu-disabled();
    }

    &__line {
        box-shadow: none;
        color: @wdu-font-color-main;
        background-color: @wdu-color-front;
        border: 1px solid rgb(231, 231, 231);

        &:hover {
            background-color: #f2f0f0;
        }
    }

    &__loading {
        &:hover {
            cursor: progress;
        }
    }

    &-group {
        .wdu-radius-normal();
        .wdu-border-solid();
        .out-shadow-light();
        overflow: hidden;
        width: max-content;

        .wdu-button {
            padding: 0 15px;
            outline: none;
            letter-spacing: 2px;
            white-space: nowrap;
            .wdu-transition-quick();
            border-radius: 0;
            border: none;

            &:first-child {
                border-radius: 5px 0 0 5px;
            }

            &:last-child {
                border-radius: 0 5px 5px 0;
            }

            &:focus {
                filter: brightness(0.7);
            }
        }
    }
}
